<template>
  账号：<input v-model="account" type="text">
    <hr>
  薪资：<input v-model="emp.salary" type="numner">
    <hr>
    <h3 id="titleAge">
        学生年龄：<span>{{ student.age }}</span>
    </h3>
  学生年龄：<input v-model="student.age" type="numner">

    <hr>
  账号：<input v-model="account" type="text">
    <button @click="stopAccountWatch">停止侦听账号数据源</button>
</template>

<script>
export default {
    data: () => ({
        account: 'Abc', // 账号
        emp: {
            name: 'Jack', // 名字
            salary: 7000 // 薪资
        },
        student: {
            name: 'Annie', // 名字
            age: 18 // 年龄
        },
        stopAccountWatch: null // 调用该函数，可以停止侦听账号数据源
    }),
    mounted() { // 声明周期函数：页面成功渲染后
        // 通过组件的实例调用$watch函数来创建侦听器
        this.$watch('account', (newData, oldData) => {
            console.log('账号的新旧值：')
            console.log(newData, oldData)
        })
        this.$watch('emp.salary', (newData, oldData) => { //监听对象
            console.log('薪资的新旧值：')
            console.log(newData, oldData)
        }, {immediate: true})
        this.$watch('student', (newData, oldData) => {
            console.log('学生的新旧值：')
            console.log(newData, oldData)
            console.log(document.getElementById('titleAge').innerHTML)
        }, {deep: true, flush: 'post'})
        this.stopAccountWatch = this.$watch('account', (newData, oldData) => {
            console.log('账号的新旧值：')
            console.log(newData, oldData)
        })
    }
}
</script>